<template>
	<view class="box">
		<view class="box-data" v-for="i in menudata" @click="tz(i)">
			<view class="datatop"><text>{{i.jname}}</text><text>{{i.status?'已入住':'待入住'}}</text></view>
			<view class="databottom">
				<view class="imgdata">
					<image :src="i.imgurl" ></image>
				</view>
				<view class="textdata">
					<text>{{i.fx}}</text>
					<text>{{i.date}}</text>
					<view class="price">
						总价：<text>￥</text><text>{{i.price}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, onMounted } from 'vue';
	let menudata = ref([])
	let tz=(data:any)=>{
		uni.navigateTo({
			url:`/pages/Reservation/Reservation?data=${JSON.stringify(data)}`
		})
	}
	let getmenu = () => {
		uni.request({
			url: 'http://127.0.0.1:3000/ljy/gethshop',
			success(res : any) {
				menudata.value = res.data.data;
				console.log(res);
			}
		})
	}
	onMounted(() => {
		getmenu()
	})
</script>

<style scoped lang="scss">
	.box {
		padding-top: 20rpx;
		width: 750rpx;
		background-color: #F2F2F2;
		height: calc(100vh - 90rpx);
		box-sizing: border-box;

		.box-data {
			width: 730rpx;
			height: 350rpx;
			margin: auto;
			margin-bottom: 20rpx;
			background-color: #FFF;
			border-radius: 10rpx;

			.datatop {
				width: 100%;
				padding: 20rpx;
				display: flex;
				justify-content: space-between;
				box-sizing: border-box;
				align-items: center;

				text:nth-child(1) {
					font-weight: bolder;
					font-size: 35rpx;
				}
				text:nth-child(2) {
					font-size: 26rpx;
				}
			}
			.databottom{
				display: flex;
				.imgdata{
					width: 300rpx;
					height: 200rpx;
					background-color: red;
					border-radius: 10rpx;
					margin-right: 40rpx;
					image{
						width: 300rpx;
						height: 200rpx;
						border-radius: 10rpx;
					}
				}
				.textdata{
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					text:nth-child(1){
						font-size: 20rpx;
					}
					text:nth-child(2){
						font-size: 10rpx;
						color: #B0B0B0;
					}
					.price{
						font-size: 20rpx;
						text:nth-child(1){
							font-size: 3rpx;
							color: #006FF6;
						}
						text:nth-child(2){
							font-size: 30rpx;
							color: #006FF6;
						}
					}
				}
			}
		}
	}
</style>